<template>
  <div>
    <el-dialog :title="titles" :visible.sync="dialogVisible" width="46%">
      <div class="header">
        <el-form
          ref="form"
          :label-position="labelPosition"
          :rules="rules"
          :model="form"
          label-width="80px"
        >
          <!-- <el-form-item label="企业全称">
            <el-input v-model="form.name" />
          </el-form-item> -->

          <el-row>
            <el-col :span="12">
              <el-form-item label="站点名称" prop="name">
                <el-input v-model="form.name" />
              </el-form-item>
              <el-form-item label="站点ID" prop="station_code">
                <el-input
                  v-model="form.station_code"
                  placeholder="站点ID一经保存无法修改，请确认后再保存"
                />
              </el-form-item>
              <el-form-item label="监控类型" prop="station_type">
                <el-radio-group v-model="form.station_type">
                  <el-radio label="1">配电</el-radio>
                  <el-radio label="2">光伏</el-radio>
                  <el-radio label="3">储能</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="是否禁用" prop="status">
                <el-radio-group v-model="form.status">
                  <el-radio label="0">是</el-radio>
                  <el-radio label="1">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="用电性质" prop="property_id">
                <el-select v-model="form.property_id">
                  <el-option
                    v-for="item in options1"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="站点类别" prop="cate_id">
                <el-select v-model="form.cate_id">
                  <el-option
                    v-for="item in options2"
                    :key="item.id"
                    :label="item.cate_name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="数据粒度" prop="data_particles">
                <el-select v-model="form.data_particles" placeholder="请选择">
                  <el-option
                    v-for="item in options5"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="数据粒度设置时间" prop="data_particles_at">
                <el-date-picker
                  v-model="form.data_particles_at"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                />
              </el-form-item>
              <el-form-item label="电价方案">
                <el-select v-model="form.scheme_id" placeholder="请选择">
                  <el-option
                    v-for="item in options3"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="上线日期" prop="on_line_at">
                <el-date-picker
                  v-model="form.on_line_at"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                />
              </el-form-item>
              <el-form-item label="所在地" prop="locations">
                <el-cascader
                  v-model="form.locations"
                  :options="areaSelectData"
                  class="local"
                  size="large"
                  placeholder="请选择您所在的城市"
                  @change="handleChange"
                />
              </el-form-item>
              <el-form-item label="供电单位" prop="power_unit">
                <el-input v-model="form.power_unit" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电压等级" prop="voltage_level">
                <el-select v-model="form.voltage_level" placeholder="请选择">
                  <el-option
                    v-for="item in options6"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="主变总数" prop="main_transform">
                <el-input v-model="form.main_transform" />
              </el-form-item>
              <el-form-item label="装机容量" prop="kw">
                <el-input v-model="form.kw" />
              </el-form-item>
              <el-form-item label="运行容量" prop="operate_capacity">
                <el-input v-model="form.operate_capacity" />
              </el-form-item>
              <el-form-item label="合同电量" prop="contract_electric">
                <el-input v-model="form.contract_electric" />
              </el-form-item>
              <el-form-item label="抄表日期" prop="read_date">
                <el-input
                  v-model="form.read_date"
                  placeholder="请输入当月第几天"
                  type="number"
              /></el-form-item>
              <el-form-item label="客户营业户号">
                <el-input v-model="form.open_no" />
              </el-form-item>
              <el-form-item label="经纬度" :prop="form.ln == '' ? 'ln' : 'lat'">
                <el-input v-model="form.ln" style="width: 30%" />
                <span>---</span>
                <el-input v-model="form.lat" style="width: 30%" />
                <el-button
                  type="primary"
                  :plain="true"
                  style="margin-left: 5px"
                  @click="seachMap"
                  >查询</el-button
                >
              </el-form-item>
              <el-form-item label="用电地址">
                <el-input v-model="form.address" />
              </el-form-item>
              <el-form-item label="联系人">
                <el-input v-model="form.contact" />
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input v-model="form.phone" />
              </el-form-item>
            </el-col>
          </el-row>

          <!-- <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item> -->
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle('form')">取 消</el-button>
        <el-button type="primary" :plain="true" @click="submitForm('form')"
          >确 定</el-button
        >
      </span>
      <baiduMap
        :visible="showMapComponent"
        @cancel="cancelMap"
        @map-confirm="confirmMap"
      />
    </el-dialog>
    <el-button v-if="false" :plain="true" @click="open2">成功</el-button>
  </div>
</template>
<script>
import {
  electricPropety,
  stationCates,
  electricScheme,
  addFile,
  updateelectric,
} from '@/api/siteFile'
import { regionData, CodeToText } from 'element-china-area-data' // 地址级联选择器
import baiduMap from '@/components/BaiduMap'
export default {
  components: {
    baiduMap,
  },
  props: ['titles', 'edits', 'ids'],
  data() {
    return {
      dialogVisible: false,
      labelPosition: 'right',
      showMapComponent: false,
      form: {
        name: '',
        station_code: '',
        station_type: '',
        property_id: '',
        cate_id: '',
        data_particles: '',
        data_particles_at: '',
        scheme_id: '',
        on_line_at: '',
        province_id: '',
        city_id: '',
        county_id: '',
        power_unit: '',
        voltage_level: '',
        main_transform: '',
        kw: '',
        operate_capacity: '',
        contract_electric: '',
        read_date: '',
        open_no: '',
        ln: '',
        lat: '',
        address: '',
        contact: '',
        phone: '',
        status: '',
        locations: [],
        province: '',
        city: '',
        county: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入站点名称', trigger: 'blur' },
          {
            min: 2,
            max: 60,
            message: '长度在 2 到 60 个字符',
            trigger: 'blur',
          },
        ],
        station_code: [
          { required: true, message: '请输入站点ID', trigger: 'blur' },
        ],
        status: [
          { required: true, message: '请选择是否禁用', trigger: 'blur' },
        ],

        station_type: [
          { required: true, message: '请选择监控类型', trigger: 'blur' },
        ],
        property_id: [
          { required: true, message: '请选择用电性质', trigger: 'blur' },
        ],
        cate_id: [
          { required: true, message: '请选择站点类别', trigger: 'blur' },
        ],
        data_particles: [
          { required: true, message: '请选择数据粒度', trigger: 'blur' },
        ],
        data_particles_at: [
          { required: true, message: '请设置时间', trigger: 'blur' },
        ],
        on_line_at: [
          { required: true, message: '请选择上线日期', trigger: 'blur' },
        ],
        locations: [
          { required: true, message: '请选择所在地', trigger: 'blur' },
        ],

        power_unit: [
          { required: true, message: '请选择供电单位', trigger: 'blur' },
        ],
        voltage_level: [
          { required: true, message: '请选择电压等级', trigger: 'blur' },
        ],
        main_transform: [
          { required: true, message: '请选择主变总数', trigger: 'blur' },
        ],

        kw: [{ required: true, message: '请选择装机容量', trigger: 'blur' }],
        operate_capacity: [
          { required: true, message: '请选择运行容量', trigger: 'blur' },
        ],
        contract_electric: [
          { required: true, message: '请选择合同电量', trigger: 'blur' },
        ],
        read_date: [
          { required: true, message: '请选择抄表日期', trigger: 'blur' },
        ],
        ln: [{ required: true, message: '请选择经纬度', trigger: 'blur' }],
        lat: [{ required: true, message: '请选择经纬度', trigger: 'blur' }],
      },
      options1: [],
      options1Value: '',
      options2: [],
      options3: [],
      options4: [],
      options5: ['1', '5', '10', '15', '30'],
      options6: [
        {
          label: '10KV',
          value: '10',
        },
        {
          label: '20KV',
          value: '20',
        },
        {
          label: '35KV',
          value: '35',
        },
        {
          label: '110KV',
          value: '110',
        },
        {
          label: '400KV',
          value: '400',
        },
      ],
      optiones1: [],
      optiones2: [],
      optiones3: [],
      areaSelectData: regionData,
      CodeToText: CodeToText,
    }
  },
  watch: {
    edits(newVal, oldVal) {
      if (this.titles == '修改') {
        console.log('编辑字段', newVal)
        this.form = newVal
        this.form.station_type = this.form.station_type.toString()
        this.form.status = this.form.status.toString()
      }
    },
  },
  created() {
    this.getelectricPropety()
    this.getstationCates()
    this.getelectricScheme()
    this.form = this.edits
    console.log('编辑字段111', this.edits)
  },
  mounted() {},
  methods: {
    open() {
      this.dialogVisible = true
    },
    open2(msg) {
      this.$message({
        message: msg,
        type: 'success',
      })
    },
    // 省市区三级联动
    handleChange(value) {
      for (let i = 0; i < value.length; i++) {
        this.form.province_id = value[0]
        this.form.city_id = value[1]
        this.form.county_id = value[2]
      }
      this.form.province = this.CodeToText[value[0]]
      this.form.city = this.CodeToText[value[1]]
      this.form.county = this.CodeToText[value[2]]
    },
    // 百度地图
    cancelMap() {
      this.showMapComponent = !this.showMapComponent
    },
    confirmMap(e) {
      // console.log(e)
      this.form.ln = e.lng
      this.form.lat = e.lat
      this.showMapComponent = !this.showMapComponent
    },
    // 查询经纬度
    seachMap() {
      this.showMapComponent = true
    },
    // 提交新增表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // this.form.voltage_level = this.form.voltage_level.substring(
          //   0,
          //   this.form.voltage_level.length - 2
          // )
          this.dialogVisible = false
          console.log('新增数据', this.form)
          if (this.titles == '新增') {
            addFile(this.form).then((res) => {
              if (res.code == 200) {
                this.open2('添加成功')
                this.$emit('getAll')
              }
            })
          }

          if (this.titles == '修改') {
            updateelectric(this.form).then((res) => {
              if (res.code == 200) {
                this.open2('修改成功')
                this.$emit('getAll')
              }
            })
          }
          this.form = {
            name: '',
            station_code: '',
            station_type: '',
            property_id: '',
            cate_id: '',
            data_particles: '',
            data_particles_at: '',
            scheme_id: '',
            on_line_at: '',
            province_id: '',
            city_id: '',
            county_id: '',
            power_unit: '',
            voltage_level: '',
            main_transform: '',
            kw: '',
            operate_capacity: '',
            contract_electric: '',
            read_date: '',
            open_no: '',
            ln: '',
            lat: '',
            address: '',
            contact: '',
            phone: '',
            status: '',
            locations: [],
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    cancle(formName) {
      this.$refs[formName].resetFields()

      this.dialogVisible = false
      this.form = {
        name: '',
        station_code: '',
        station_type: '',
        property_id: '',
        cate_id: '',
        data_particles: '',
        data_particles_at: '',
        scheme_id: '',
        on_line_at: '',
        province_id: '',
        city_id: '',
        county_id: '',
        power_unit: '',
        voltage_level: '',
        main_transform: '',
        kw: '',
        operate_capacity: '',
        contract_electric: '',
        read_date: '',
        open_no: '',
        ln: '',
        lat: '',
        address: '',
        contact: '',
        phone: '',
        status: '',
        locations: [],
      }
    },

    // 获取用电性质列表
    getelectricPropety() {
      electricPropety().then((res) => {
        this.options1 = res.data.data
        this.options1Value = res.data.data[0].id
      })
    },
    // 获取站点类别
    getstationCates() {
      stationCates().then((res) => {
        this.options2 = res.data.data
      })
    },
    // 获取电价方案
    getelectricScheme() {
      electricScheme().then((res) => {
        this.options3 = res.data.data
      })
    },
  },
}
</script>
<style>
.el-cascader__dropdown {
  bottom: 220px !important;
  overflow: auto;
  /* background-color: red; */
}
</style>
<style lang="scss" scoped>
::v-deep.el-dialog {
  height: 70%;
  overflow: auto;
}
::v-deep.el-dialog__body {
  // padding-left: 30px;
  padding-right: 30px;
  height: 83%;
  overflow: auto;
}
::v-deep.el-form-item__label {
  width: 134px !important;
}
::v-deep.el-form-item__content {
  margin-left: 144px !important;
}
.province {
  width: 25%;
  margin-right: 5px;
}
::v-deep.el-col-12 {
  padding-right: 20px;
}
// .seachs {
//   display: inline-block;
//   margin-left: 10px;
//   padding: 1px 10px;
//   border-radius: 3px;
// }
</style>
